<template>
  <transition
    enter-active-class="animate__animated animate__bounce animate__repeat-2"
  >
    <div class="player" v-if="$root.musicStore.musicID">
      <audio
        :src="`https://music.163.com/song/media/outer/url?id=${$root.musicStore.musicID}.mp3`"
        autoplay
        @timeupdate="timeUpdate"
        @pause="timeUpdate"
        ref="audio"
        @ended="nextSong"
      ></audio>
      <!-- <ul>
            <li v-for="m in $root.musicStore.musicList" :key="m.id" :style="
            {color:m.id==$root.musicStore.musicID ? 'red':''
            }"> 
                {{m.name}}
            </li>
        </ul> -->

      <div class="playBar">
        <i ref="randImg">
        <template v-if="$root.musicStore.currentMusic.picUrl"><img :src="$root.musicStore.currentMusic.picUrl" /></template>
        <template v-if="$root.musicStore.currentMusic.al"><img :src="$root.musicStore.currentMusic.al.picUrl" /></template>
        <template v-if="$root.musicStore.currentMusic.artists"><img :src="$root.musicStore.currentMusic.artists[0].img1v1Url" /></template>
        </i>
        
        <div class="music">
              <span @click="isFullPage = true" >
                {{ $root.musicStore.currentMusic.name }}
                <!-- <i>{{ $root.musicStore.currentMusic.song.alias[0] }}</i> -->
              </span>
              <template v-if="$root.musicStore.currentMusic.song" >

                  <span>{{ $root.musicStore.currentMusic.song.artists[0].name }}</span>
              </template>
              <template v-if="$root.musicStore.currentMusic.name">
                
                <span>{{ $root.musicStore.currentMusic.name }}</span>
                
              </template>

         
        </div>

        <div class="musicbtn">
          <i @click="prevSong" class="iconfont icon-shangyishou"></i>
          <i
            @click="changePlay"
            :class="isPlay ? 'icon-zanting' : 'icon-kaishi'"
          ></i>
          <i @click="nextSong" class="iconfont icon-xiayishou"></i>
        </div>
      </div>

      <div class="fullPage" v-show="isFullPage">
        <div class="fullPageTop">
          <i @click="isFullPage = false" class="iconfont icon-zuobian1"></i>
          <span class="fullPagemname">{{
            $root.musicStore.currentMusic.name
          }}</span>
          <i class="iconfont icon-fenxiang"></i>
        </div>

        <div class="needle"></div>

        <div class="SBimg" 
        @click="isLyric = !isLyric"
        v-show="!isLyric"
        >
          <div class="slotimg">
            <div class="songImg" ref="songImg">
              <img :src="$root.musicStore.currentMusic.picUrl" />

               <template v-if="$root.musicStore.currentMusic.al">
                <img :src="$root.musicStore.currentMusic.al.picUrl" />
            </template>

            <template v-if="$root.musicStore.currentMusic.artists">
                <img :src="$root.musicStore.currentMusic.artists[0].img1v1Url" />
            </template>
            </div>

           
          </div>
        </div>

        <div class="lyric" v-if="lyric" v-show="isLyric" @click="isLyric=!isLyric" >
          <ul
            :style="{
              transform: `translateY(-${moveTop}px)`,
            }"
          >
            <li
              ref="lyricLi"
              v-for="(l, index) in lyric"
              :key="index"
              :class="{ active: currentIndex == index }"
            >
              {{ l.lyric }}
            </li>
          </ul>
        </div>

        <div class="controlBal">
            <i class="iconfont icon-love-o"></i>
            <i class="iconfont icon-xiazai"></i>
            <i class="iconfont icon-pinglun"></i>
            <i class="iconfont icon-gengduoxiao"></i>
        </div>
        <!-- 滑槽 -->
        <div class="progressbig">
          <span>{{currentTime | formatDate(currentTime)}}</span>
        <div class="progress">
          <input
            type="range"
            min="0"
            :max="duration"
            :value="currentTime"
            @change="changeTime"
          />
          <i :style="{ width: `${(currentTime / duration) * 56}vw` }"></i>
        </div>
        <span>{{duration | formatDate(duration)}}</span>
        </div>


        <!-- 随机播放 -->
        <div class="controlBar">
          <i @click="playModes"
           class="iconfont icon-shunxubofang"
           :class="isRand ? 'icon-suiji' : 'icon-shunxubofang' "
           
           ></i>
          <i @click="prevSong" class="iconfont icon-shangyishou"></i>

          <i
            @click="changePlay"
            class="iconfont"
            :class="isPlay ? 'icon-zanting' : 'icon-kaishi'"
          ></i>
          <i @click="nextSong" class="iconfont icon-xiayishou"></i>
          <i
            @click="showPlayList = !showPlayList"
            class="iconfont icon-ai222"
          ></i>
        </div>
      <div class="playList" v-show="showPlayList">
        <div class="playListicom">
          
         <i class="iconfont icon-shunxubofang"><span>顺序播放</span></i>
            <i class="iconfont icon-tianjiawenjianjia"><span>歌曲收藏 |</span></i>
            <i class="iconfont icon-lajixiang"></i>
          
        </div>
        <ul>
            <li
              v-for="v in $root.musicStore.musicList"
              :key="v.id"
              :style="{
                color: v.id == $root.musicStore.musicID ? 'red' : '',
              }"
              @click="playMusic(v)"
            >
              {{ v.name }}
            </li>
            <p @click="showPlayList = !showPlayList">关闭</p>
          </ul>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "Play",
  data() {
    return {
      isPlay: true,
      isFullPage: false,
      duration: 0,
      currentTime: 0,
      playMode: 'random',
      showPlayList: false,
      lyric: null,
      currentIndex: 0,
      moveTop: 0,
      isRand:true,
      isLyric:false,
    };
  },
      
    filters:{
        formatDate(time){
        var m = parseInt((time%3600)/60),
        s=parseInt(time%60);
        m=m<10?"0"+m:m;
        s=s<10?"0"+s:s;
        return m + ":"+s;
      },
    },
  computed: {
    musicIDs() {
      let musicID = this.$root.musicStore.musicID;
      return musicID;
    },
  },
  watch: {
    musicIDs(musicID) {
      this.$http
        .get("http://music.kele8.cn/lyric?id=" + musicID)
        .then((data) => {
          let lyricArr = data.data.lrc.lyric.split("\n");
          lyricArr.pop(); //取出匹配不到的最后一条
          let reg = /\[(\d+):(\d+\.\d+)\](.*)/;
          let newLiric = lyricArr.map((d) => {
            if (reg.test(d)) {
              return {
                time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
                lyric: RegExp.$3,
              };
            }
          });
          this.lyric = newLiric;
          //  console.log(data);
        });
       
    },
  },
  methods: {
    playMusic(item) {
      this.$root.musicStore.musicID = item.id;
      this.$root.musicStore.currentMusic = item;
    },
    playModes (){
      if(this.isRand==true){
        this.playMode = ""
      }else{
        this.playMode = "random"
      }
      this.isRand =!this.isRand;
    },
    changeSong() {
      let currentIndex = 0;
      let musicList = this.$root.musicStore.musicList;
      console.log(this.playMode);
      if(this.playMode=='random'){
        return parseInt(musicList.length*Math.random());//随机
      }else{
         for (let i in musicList) {
        //循环所有播放列表 找到当天播放音乐下标
        if (musicList[i].id === this.$root.musicStore.musicID) {
          currentIndex = i;
          break;
        }
      }
      return currentIndex;
      }

     
    },

    prevSong() {
      let currentIndex = this.changeSong();
      let musicList = this.$root.musicStore.musicList;
      currentIndex--; //找到上一曲
      if (currentIndex < 0) {
        //如果上一曲下标为负数，则上一曲就是最后一曲
        currentIndex = musicList.length - 1;
      }
      //改变当前播放音乐的信息
      this.$root.musicStore.musicID = musicList[currentIndex].id;
      this.$root.musicStore.currentMusic = musicList[currentIndex];
    },
    nextSong() {
      let currentIndex = this.changeSong();
      let musicList = this.$root.musicStore.musicList;
      currentIndex++; //找到下一曲
      if (currentIndex >= musicList.length) {
        //如果下一曲大于等于整个列表长度，则回到第一曲

        currentIndex = 0;
      }
      //改变当前播放音乐的信息
      this.$root.musicStore.musicID = musicList[currentIndex].id;
      this.$root.musicStore.currentMusic = musicList[currentIndex];
    },
    pause(event) {
      this.isPlay = true;
      this.changePlay();
      this.timeUpdate(event);
    },
    play(event) {
      this.isPlay = false;
      this.changePlay();
      this.timeUpdate(event);
    },
    changeTime(event) {
      let time = event.target.value;
      this.currentTime = time;
      this.$refs.audio.currentTime = time;
    },
    changePlay() {
      let audio = this.$refs.audio;
      let randImg = this.$refs.randImg;
      let songImg = null;
      // if(this.isFullPage){//判断只有全屏的时候才有里面的旋转图片
      songImg = this.$refs.songImg;
      // }
      if (this.isPlay) {
        audio.pause();
        this.isPlay = false;
        randImg.style.animationPlayState = "paused";
        if(this.isFullPage) songImg.style.animationPlayState = "paused"

      
      } else {
        audio.play();
        this.isPlay = true;
        randImg.style.animationPlayState = "running";
         if(this.isFullPage) songImg.style.animationPlayState = "running"
      }
    },

    timeUpdate(event) {
      let audio = event.target; //获取audio元素
      let currentTime = audio.currentTime; //当前播放时间
      for (var i = 0; i < this.lyric.length; i++) {
        if (i >= this.lyric.length - 1) {
          this.currentIndex = i;
          break;
        }

        if (
          this.lyric[i].time <= currentTime &&
          currentTime < this.lyric[i + 1].time
        ) {
          if (i >= 4) {
            //获取当前播放歌词上一条歌词距离父元素上面的距离.
            this.moveTop = this.$refs.lyricLi[i - 1].offsetTop;
          } else {
            this.moveTop = 0;
          }
          this.currentIndex = i;
          break;
        }
      }
      let duration = audio.duration; //音频总时长
      this.currentTime = currentTime;
      this.duration = duration;
      // this.drawCircle(currentTime, duration);
    },


    // drawCircle(currentTime, duration) {
    //   let canvas = this.$refs.processBtn.getContext("2d"); //画布
    //   canvas.clearRect(0, 0, 100, 100); //清除画布
    //   canvas.beginPath();
    //   canvas.strokeStyle = "#f00";
    //   canvas.lineWidth = 10;
    //   canvas.arc(50, 50, 40, 0, 2 * Math.PI);
    //   canvas.stroke();
    //   canvas.closePath();

    //   canvas.beginPath();
    //   canvas.strokeStyle = "#00F";
    //   canvas.lineWidth = 10;
    //   canvas.arc(
    //     50,50,40,0,2 * Math.PI * parseFloat(currentTime / duration)
    //   );
    //   canvas.stroke();
    //   canvas.closePath();

    //   canvas.beginPath();
    //   canvas.fillStyle = "rgba(255,0,0,0.5)";
    //   canvas.font = "24px 微软雅黑";
    //   canvas.textAlign = "center";
    //   let str ="";
    //   if (!this.isPlay) {
    //     str = "";
    //   }
    //   canvas.fillText(str, 50, 50);
    //   canvas.closePath();
    // },
  },
  created() {},
};
</script>
<style lang="less" scoped>
.player {
  position: fixed;
  z-index: 9;
  bottom: 0px;
  width: 100%;
  background-color: #fefefe;
  audio {
    height: 50px;
  }
  .playBar {
    display: flex;
    padding: 5px 10px;
    align-items: center;

    .music {
      flex: 1;
      span {
        &:first-of-type {
          padding-left: 10px;
          display: block;
          i {
            padding-left: 5px;
          }
        }
        &:nth-child(2) {
          padding-left: 10px;
          font-size: 14px;
          color: #ccc;
        }
        &:nth-child(3) {
          padding-left: 10px;
          font-size: 14px;
          color: #ccc;
        }
      }
    }
    i {
      font-style: normal;
      &:first-of-type {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        animation: randImg 5s linear 0s infinite;
      }
      &:last-of-type {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        canvas {
          width: 50px;
          height: 50px;
        }
      }
    }

    .musicbtn {
      i {
        font-family: "iconfont" !important;
        font-size: 36px;
        font-style: normal;
        padding-left: 10px;
      }
    }
  }

  .fullPage {
    z-index: 99;
    .active {
      color: red;
    }
    width: 100vw;
    height: 100vh;
    background: #42433d;
    .fullPageTop {
      padding-top: 20px;
      padding-left: 20px;
      padding-right: 20px;
      display: flex;
      color: #fff;
      i {
        font-family: "iconfont" !important;
        font-size: 22px;
        font-style: normal;
      }
      span {
        &:nth-child(2) {
          flex: 1;
          text-align: center;
          border-bottom: 1px solid #6f6363;
          padding-bottom: 20px;
        }
      }
    }
    .needle {
      background: url(../assets/needle.png) no-repeat;
      width: 95px;
      height: 155px;
      background-size: cover;
      margin: -39px auto;
      transform: rotate(-29deg);
    }
    .SBimg {
      height: 56vh;
      width: 100vw;
      animation: randImg 10s linear 0s infinite;
      display:flex;
        justify-content:center;
        align-items:center; 
      
      .slotimg {
        height: 320px;
        width: 320px;
        background: url(../assets/stoa.png) no-repeat;
        background-size: cover;
        position: relative;
        display:flex;
        justify-content:center;
        align-items:center;
        margin:0 auto;

      }
      .songImg {
        width: 62%;
        height: 62%;
        border-radius: 50%;
        overflow: hidden;
        
      }
    }
    
    .lyric {
      height: 56vh;
      overflow: hidden;
      text-align: center;
      color: #fff;
    }
    .controlBal{
        margin-top: 20px;
        color: #fff;
        i {
          font-family: "iconfont" !important;
    font-size: 28px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 56px;
       }
      }
    .progressbig{
      width: 100%;
      display: flex;
      align-items: center;
      span{
        flex: 1;
        text-align: center;
        color: #fff;
      }

      
      .progress {
      width: 56vw;
      margin: 2vh auto;
      position: relative;

      input {
        //取出默认样式
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        position: relative;
        z-index: 2;

        &::-webkit-slider-thumb {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          margin-top: -8px;
          background: #fff;
          appearance: none;
          -webkit-appearance: none;
          //控制滑头
        }
        &::-webkit-slider-runnable-track {
          // 控制滑槽
          appearance: none;
          -webkit-appearance: none;
          height: 4px;
          border-radius: 5px;
          background: rgb(red, 0, 0, 1);
          box-shadow: inset 10px 10px 10px rgba(247, 247, 247, 0.3);
        }
      }
    }
    
      i {
        position: absolute;
        width: 50px;
        height: 4px;
        background: #111110;
        left: 0;
        top: 14px;
        z-index: 1;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }
    }
  }
  .controlBar {
    color: #fff;
    text-align: center;

    i {
          font-family: "iconfont" !important;
    font-size: 44px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 26px;
    }
   
  }
}
 .playList {
      background: #fff;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      width: 100vw;
      height: 70vh;
      overflow-y: auto;
      border: 1px solid black;
      position: absolute;
      bottom:0px ;
      z-index: 33;
      
      .playListicom{
        margin:20px;
        display:flex;
        i{
          font-family: "iconfont" !important;
          font-size: 22px;
          font-style: normal;
          padding-bottom: 10px;
          &:nth-child(1){
            flex: 1;
          }
            &:nth-child(3){
             padding-top: 5px;
             
            }
          }
          span{
            margin-left: 10px;
            margin-right: 20px;
            
          }
         
        }
        ul{
            li{
              width: 100%;
              height: 60px;
              line-height: 60px;
              border-top: 1px solid #f5f5f5;
              padding-left: 20px;
              font-size:18px;
              span{
                color: #ccc;
                font-size: 14px;
              }
              
            }
            p{
                text-align: center;
                width: 100%;
                height: 80px;
                line-height: 80px;
                border-top: 1px solid #f5f5f5;
                font-size: 20px;
              }
          }
      }
    
@keyframes randImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>